<template>
	<view class="box-theme-item">
		<text class="title">
			<!-- <uni-dateformat date="2020/10/20 20:20:20" :threshold="[0, 99999999]"></uni-dateformat> -->
			<template v-if="Date.now() - create_time < 2592000000">
				<text>・</text>
				<uni-dateformat :date="create_time" :threshold="[0, 999999999999999999999]" />
				<text>更新</text>
			</template>
		</text>
		<!-- <image lazy-load class="the-image" :src="src" mode="aspectFill"></image> -->

		<view class="box-image">
			<ImageLoading :src="src"></ImageLoading>
		</view>

		<view class="desc"></view>
		<text class="desc-text">{{ name }}</text>
	</view>
</template>

<script setup>
defineProps(['src', 'name', 'create_time'])
</script>

<style lang="scss" scoped>
.box-theme-item {
	position: relative;
	width: 223rpx;
	height: 350rpx;
	border-radius: 15rpx;
	overflow: hidden;
	@extend .f-c-c;

	.title {
		position: absolute;
		z-index: 2;
		top: 0%;
		left: 0%;
		background-color: rgba(255, 140, 148, 0.8);
		font-size: 22rpx;
		padding: 2rpx 15rpx 4rpx 5rpx;
		border-bottom-right-radius: 20rpx;
		color: white;
	}

	.the-image {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.desc,
	.desc-text {
		position: absolute;
		z-index: 1;
		bottom: 20rpx;
		width: 100%;
		height: 70rpx;
	}

	.desc {
		border-radius: 100rpx;
		box-sizing: border-box;
		width: 85%;
		background-color: rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(15rpx);
	}

	.desc-text {
		@extend .f-c-c-n;
		font-size: 30rpx;
		color: white;
		backdrop-filter: none;
	}
	.box-image {
		width: 100%;
		height: 100%;
	}
}
</style>
